<template>
  <div class="ordinary-withdrawal pd-20">
    <el-input v-model="param.searchCondition"
              placeholder="请输入用户名"
              class="w-200"
              clearable
              @clear="handleQuery"/>
    <el-input v-model="param.hospitalName"
              placeholder="请输入执业单位"
              class="w-200"
              clearable
              @clear="handleQuery"/>
    <el-date-picker v-model="time"
                    type="datetimerange"
                    value-format="yyyy-MM-dd"
                    clearable
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="changeTime">
    </el-date-picker>
    <el-select v-model="param.status"
               placeholder="请选择审核状态"
               clearable
               @change="handleQuery"
               @clear="handleQuery"
               class="w-200">
      <el-option label="待审核"
                 :value="0"></el-option>
      <el-option label="通过"
                 :value="1"></el-option>
      <el-option label="驳回"
                 :value="-1"></el-option>
    </el-select>
    <el-button @click="handleQuery"
               type="primary">查 询
    </el-button>
    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:option="{row}">
        <el-button type="primary"
                   v-if="row.status === 0"
                   @click="handleRowClick(row, 'pass')">通 过
        </el-button>
        <el-button type="danger"
                   v-if="row.status === 0"
                   @click="handleRowClick(row, 'reject')">驳 回
        </el-button>
      </template>
      <template v-slot:status="{row}">
        <el-popover placement="top-start"
                    title="驳回理由"
                    width="200"
                    trigger="hover"
                    :content="row.rejectReason">
          <el-tag slot="reference"
                  type="danger"
                  v-if="row.status === -1">驳回
          </el-tag>
        </el-popover>
        <span v-if="row.status === 0">待审核</span>
        <span v-if="row.status === 1">审核成功</span>
      </template>

      <template v-slot:withdrawType="{row}">
        <el-popover placement="top-start"
                    title="失败原因"
                    width="200"
                    trigger="hover"
                    :content="row.remark">
          <el-tag slot="reference"
                  type="danger"
                  v-if="row.withdrawStatus === -1&&row.status!==0">提现失败
          </el-tag>
        </el-popover>
        <span v-if="row.withdrawStatus !== -1&&row.status===0">待审核</span>
        <span v-if="row.withdrawStatus !== -1&&row.status === 1">提现成功</span>
      </template>

    </element-table>
    <el-dialog title="驳回理由"
               :visible.sync="dialogVisible"
               width="30%"
               @close="dialogVisible = false">
      <el-input type="textarea"
                placeholder="请输入驳回理由"
                v-model="rejectReason"></el-input>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitReason">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import elementTable from '@/base/ElementTable'

export default {
  name: 'ordinaryWithdrawal',
  data() {
    return {
      loading: false,
      dialogVisible: false,
      pageTotal: 0,
      pageIndex: 1,
      pageSize: 20,
      columns: [
        {
          label: '提现申请时间',
          prop: 'createTime',
          align: 'center',
          width: 150,
          formatter: (row, cellValue) => {
            return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
          }
        },
        {
          label: '申请账号',
          prop: 'loginPhone',
          align: 'center',
          width: 120
        },
        {
          label: '申请人姓名',
          prop: 'nickName',
          align: 'center',

        },
        {
          label: '提现金额',
          prop: 'applyAmount',
          align: 'center',
        },
        {
          label: '提现手续费',
          prop: 'serviceFee',
          align: 'center',

        },
        {
          label: '到账金额',
          prop: 'actualAmount',
          align: 'center',
          formatter: (row, cellValue) => {
            return row.actualAmount ? Number(row.actualAmount).toFixed(2) : '--'
          }
        },
        {
          label: '提现账户类型',
          prop: 'type',
          align: 'center',
          formatter: (row, cellValue) => {
            if (row.type === 3) return <el-tag type="success">银行卡</el-tag>
            if (row.type === 1) return <el-tag type="danger">支付宝</el-tag>
            if (row.type === 2) return <el-tag type="warning">微信</el-tag>
          },
        },
        {
          label: '提现账户',
          prop: 'receivablesAccount',
          align: 'center',
          width: 120,
        },
        {
          label: '审核状态',
          prop: 'status',
          align: 'center',
          isSlot: true
        },
        {
          label: '提现状态',
          prop: 'withdrawType',
          align: 'center',
          isSlot: true

        },
        {
          label: '提现到账时间',
          prop: 'accountingDate',
          align: 'center',
          width: 150,
          formatter: (row, cellValue) => {
            if (row.accountingDate) {
              return this.commonFunction.timestampFormat(new Date(row.accountingDate), 'yyyy-MM-dd hh:mm:ss')
            } else {
              return '--'
            }
          }
        },
        {
          width: 160,
          label: '操作',
          align: 'center',
          prop: 'option',
          isSlot: true
        }
      ],
      tableData: [],
      time: '',
      param: {
        searchCondition: '', // 用户名
        hospitalName: '', // 执业单位
        startTime: '',
        endTime: '',
        status: '', // 审核状态（0 待审核 1通过）
        withdrawStatus: '', // 提现状态
      },
      doctorTitleNameList: [],
      currTime: [],
      dataObj: {},
      rejectReason: '' // 驳回理由
    }
  },
  watch: {
    currTime: {
      deep: true, // 深度监听
      handler(val) {
        this.pageIndex = 1
        this.getList()
      }
    }
  },
  methods: {
    changeTime(item) {
      this.currTime = item
      if (item) {
        this.param.startTime = item[0]
        this.param.endTime = item[1]
      } else {
        this.param.startTime = ''
        this.param.endTime = ''
      }
    },
    handleQuery() {
      this.pageIndex = 1
      this.getList()
    },
    // 列表
    getList() {
      this.loading = true
      this.post(this.api.withdraw.getUserAccounttWithdrawList, {
        pageIndex: this.pageIndex - 1,
        pageSize: this.pageSize,
        ...this.param
      }).then((res) => {
        if (res.data.code === '200') {
          this.loading = false
          this.tableData = res.data.object
          this.pageTotal = res.data.totalNum
        }
      })

    },
    // 分页
    handleChangePage(page) {
      this.pageIndex = page
      this.getList()
    },
    // 操作
    async handleRowClick(row, op) {
      switch (op) {
        case 'pass':
          //通过
          this.dataObj = row
          this.subAudit('', 1)
          break;
        case 'reject':
          //驳回
          this.dataObj = row
          this.dialogVisible = true
          break;
      }

    },
    // 提交驳回理由
    submitReason() {
      if (this.rejectReason === '') {
        this.$message.warning('请输入驳回理由!')
        return
      }
      this.subAudit(this.rejectReason, -1)

    },
    //提交审核
    subAudit(rejectReason, status) {
      this.post(this.api.withdraw.auditWithdrawal, {
        id: this.dataObj.id,
        rejectReason: rejectReason,
        status: status
      }).then((res) => {
        if (res.data.code === '200') {
          this.$message.success('操作成功')
          this.dialogVisible = false
          this.getList()
        }
      })
    }

  },
  created() {
    this.getList()
  },
  components: {
    'element-table': elementTable,
  }
}
</script>
<style scoped lang="scss">
/deep/ .el-popover {
  color: #f00;
}
</style>
